<template>
    <div class="u-select">
        <div class="u-select_inner" @click="handleClick">
            <slot name = "calendar"></slot>
            <div class="u-input">
                <input v-bind="$attrs" readonly="readonly" disabled type="text" v-model="selectedLabel">
            </div>
            <span class="icon-arrow-up-deep"></span>
        </div>
        <div class="u-select_dropdown" v-if="!bottom" v-show="visible">
            <i class="ico"></i>
            <ul class="isScroll">                
                <slot></slot>
            </ul>
        </div>
        <transition name="upDown">
            <div class="u-select_dropdown_foot" v-if="bottom" v-show="visible">
                <slot name = "title"></slot>
                <div class="closeIco" @click="handleClick"></div>
                <ul class="isScroll">                
                    <slot></slot>
                </ul>
            </div>
        </transition>
        <div class="mask" v-if="visible" @click="handleClick"></div>
    </div>
</template>
<script>
    import Emitter from '@/utils/emitter';
    export default {
        name: 'USelect',
        componentName: 'USelect',
        mixins: [Emitter],
        inheritAttrs: false, 
        props: {
            value: {},
            dataPick: Boolean,
            effect: String,
            bottom: Boolean
        },
        data() {
            return {               
                visible: false,
                optionvalue:'',
            }
        },  
        created() {
            this.$on('handleOptionClick', this.handleOptionSelect);
            this.$on('setSelected', this.setSelected);
        },
        
        computed: {
            selectedLabel() {
                return this.optionvalue
            },
        },
        mounted() {
        },
        methods: {
            handleClick() {    
                this.visible = !this.visible
                this.$store.dispatch("setMaskAct",this.visible);
            },
            
            handleOptionSelect(option, byClick) {
                this.optionvalue = option.value
                this.$emit('input', option.label) 
                this.$emit('change', option.label);
                if(byClick){
                    this.visible = false;
                    this.$store.dispatch("setMaskAct",this.visible);
                }
                    
            },
            setSelected(option) {
                this.optionvalue = option.value
                this.$emit('input', option.label) 
                this.$emit('change', option.label);
            },
        }
    };
</script>
<style lang="scss" scoped>
/deep/.u-select{
    position: relative;
    width: 3.9rem; height: .8rem;
    .u-select_inner{
        width: 100%; height: 100%;
        background: #f3f5f7;
        position: relative;
        border-radius: .4rem;
    }
    .u-input{
        width: 100%; height: 100%;
        position: relative;
        padding: 0 .6rem 0 .32rem;
        input{
            width: 100%; height: 100%;
            background: none;
            font-size: .3rem;
            display: block;
            text-align: center;
        }
        input:disabled, input[disabled]{ color:#000;-webkit-text-fill-color:#000;}
        &::after{
            content: '';
            background: url(~@/assets/img/icon/arrow_btm.png) no-repeat 0 center;
            background-size: 100%;
            width: .24rem; height: 100%;
            position: absolute; right: .32rem; top: 0;
        }
    }
    
    .u-select_dropdown{
        position: absolute; top: 1.6rem; left: .35rem;
        width: 3.2rem; 
        background: #fff;
        padding: .4rem 0;
        border-radius: .4rem;
        z-index: 4000;
        .ico{
            position: absolute; left: 50%; top: -.22rem; transform: translateX(-50%);
            background: url(~@/assets/img/icon/arrow_right.png) no-repeat 0 0;
            background-size: 100%;
            width: .4rem; height: .26rem;
        }
        li{
            text-align: center;
            font-size: .32rem;
            line-height: .8rem;
            &.selected{
                color: #ff7b12;
            }
        }
        ul{
            max-height: 4.5rem;
            overflow: auto;
        }
    }
    .u-select_dropdown_foot{
        position: fixed; bottom: 0; left: 0;
        width: 100%;
        background: #fff;
        border-radius: .4rem .4rem 0 0;
        z-index: 4000;
        padding: .8rem 0;
        .u-select_dropdown_title{
            font-size: .48rem; font-weight: bold;
            text-align: center;
        }
        .closeIco{
            background: url(~@/assets/img/icon/dropdown-close.png) no-repeat;
            background-size: 100%;
            width: .48rem; height: .48rem;
            position: absolute; right: .32rem; top: .32rem;
        }
    }
}
</style>   